<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约管理</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="/img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="/element/element-ui.css">
    <link rel="stylesheet" href="/css/registeredManage.css">
</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20" v-loading="loading">
                            <!--右边卡片-->
                            <el-card shadow="hover">
                                <!--页面内容-->
                                <el-row>
<!--                                    <el-col span="9">-->
<!--                                        <div>-->
<!--                                            <span>子用户：</span>-->
<!--                                            <el-select v-model="patientsValue" class="patients-select" clearable-->
<!--                                                       placeholder="请选择">-->
<!--                                                <el-option-->
<!--                                                        v-for="item in patientsList"-->
<!--                                                        :key="item.id"-->
<!--                                                        :label="item.nickname"-->
<!--                                                        :value="item.id">-->
<!--                                                </el-option>-->
<!--                                            </el-select>-->
<!--                                        </div>-->
<!--                                    </el-col>-->
                                    <el-col span="9">
                                        <div>
                                            <span>挂号状态：</span>
                                            <el-select v-model="registeredStatusValue" class="patients-select"
                                                       placeholder="请选择">
                                                <el-option
                                                        v-for="item in registeredStatus"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col offset="1" span="2">
                                        <div>
                                            <el-link style="line-height: 40px" type="primary" :underline="false"><span
                                                    style="font-size: 16px"
                                                    @click="listGetRegisteredManageData()">查询</span></el-link>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider></el-divider>
                                <!--挂号数据-->
                                <el-row v-loading="loading">
                                    <el-col>
                                        <el-table
                                                ref="singleTable"
                                                highlight-current-row
                                                :data="registerData"
                                                height="500"
                                                style="width: 100%">
                                            <el-table-column
                                                    width="200"
                                                    label="就诊时间">
                                                <template slot-scope="scope">
                                                    <div v-if="scope.row.id===v.registerData[0].id">
                                                        <span slot="reference">{{scope.row.date}}</span>
                                                    </div>
                                                    <div v-else>
                                                        <span slot="reference">{{scope.row.date}}</span>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    width="150"
                                                    prop="hospital"
                                                    label="医院">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deptName"
                                                    label="科室">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="doctor"
                                                    label="医生">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="expenses"
                                                    label="服务费">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="nickname"
                                                    label="就诊人">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="status"
                                                    label="挂号状态">
                                                <template slot-scope="scope">
                                                    <div slot="reference" class="name-wrapper">
                                                        <el-tag type="success" v-show="scope.row.status===1">已预约
                                                        </el-tag>
                                                        <el-tag v-show="scope.row.status===2">受理中</el-tag>
                                                        <el-tag type="danger" v-show="scope.row.status===3">已取消
                                                        </el-tag>
                                                        <el-tag type="info" v-show="scope.row.status===4">已就诊
                                                        </el-tag>
                                                    </div>
                                                </template>
                                            </el-table-column>

                                            <el-table-column label="操作">
                                                <template slot-scope="scope">
                                                    <el-button @click="handleClickCancle(scope.row)" type="text">取消
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- 引入Vue和Element UI库 -->
<script src="/js/vue.js"></script>
<script src="/element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="/js/axios.js"></script>
<!--引入自定义header-->
<script src="/js/index-header.js"></script>
<!--引入自定义footer-->
<script src="/js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="/js/index-left-card.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                /*加载f*/
                loading: true,
                //就诊人  可能为子用户
                patients: localStorage.getItem("currentNickName"),
                //用户账号
                username: localStorage.getItem("currentUsername"),
                //预约数据
                registerData: [],
                //预约状态
                registeredStatus: [
                    {
                        value: 1,
                        label: '已预约',
                    },
                    {
                        value: 2,
                        label: '受理中',
                    },
                    {
                        value: 3,
                        label: '已取消',
                    },
                    {
                        value: 4,
                        label: '已就诊',
                    }
                ],
                //就诊人列表
                patientsList: [],
                value: '',
                //就诊人
                patientsValue: '',
                //预约状态
                registeredStatusValue: 1,
                //预约气泡显示
                visible: false,
            }
        },
        methods: {
            //取消预约
            handleClickCancle(row) {
                if (row.status === 3) {
                    v.$message.info("你已取消当前预约");
                    return;
                }

                let username = localStorage.getItem("currentUsername");
                let cancleData = {id: row.id, username: username}
                axios.post("/pa/booking/registeredCancle", cancleData, {headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.$message.success("取消成功");
                        v.listGetRegisteredManageData();
                        //重新加载预约数据 当前状态数据
                        // v.listUserBookingData();
                    }
                    v.loading = false;
                })
            },
            //获取当前账号的预约数据
            listUserBookingData() {
                axios.get("/pa/booking/getBookingDataByUsername/" + this.username, {headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.registerData = res.data.data[0];
                    } else {
                        v.$message.error("预约数据加载失败");
                        v.loading = false;
                    }
                })
            },
            //解析时间戳
            parseDate(timestamp) {
                let date = new Date(timestamp);
                let year = date.getFullYear();
                let month = ('0' + (date.getMonth() + 1)).slice(-2);
                let day = ('0' + date.getDate()).slice(-2);
                let hour = ('0' + date.getHours()).slice(-2);
                let minute = ('0' + date.getMinutes()).slice(-2);
                return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
            },
            //获取当前账号的就诊人数据
            listPatientsData() {
                axios.get("/pa/userChild/listPatientByUsername/" + this.username, {headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.patientsList = res.data.data;
                    } else {
                        v.$message.error("就诊人数据加载失败");
                        v.loading = false;
                    }
                })
            },
            //根据就诊人或者状态查询预约数据
            listGetRegisteredManageData() {
                let patientsId = v.patientsValue;
                let registeredStatus = v.registeredStatusValue;
                console.log(patientsId + " " + registeredStatus);
                if (v.patientsValue === '') {
                    patientsId = localStorage.getItem("currentUsername");
                }
                //如果没有无状态
                if (registeredStatus === '') {
                    v.listUserBookingData();
                }
                axios.get("/pa/booking/searchByIdAndStatus/" + patientsId + "/" + registeredStatus, {headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.registerData = res.data.data;
                    } else {
                        v.$message.error("预约数据查询失败");
                    }
                })
            },
            //加载默认预约状态
            listDefaultBookingData() {
                axios.get("/pa/booking/searchByIdAndStatus/" + localStorage.getItem("currentUsername") + "/" + this.registeredStatusValue, {headers: {Token: localStorage.getItem('localJwt'),}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.registerData = res.data.data;
                    } else {
                        v.$message.error("预约数据查询失败");
                    }
                })
            }
        },
        updated() {
            //最新预约数据高亮
            this.$refs.singleTable.setCurrentRow(v.registerData[0]);
            v.loading = false;
        },
        created() {
        },
        mounted() {
            //加载当前用户的预约数据
            // this.listUserBookingData();
            this.listDefaultBookingData();
            this.listPatientsData();

            //显示气泡
            this.visible = true;
        },
        watch() {

        }
    })
</script>
</html>
